<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./static/element-plus/index.css" />
    <script src="./static/js/vue.global.js"></script>
    <script src="./static/element-plus/index.full.js"></script>
     <title>注册</title>
     <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f5f5f5;
        }
        </style>

</head>

<body>
    <div id="register">
        <el-container>
            <el-header>
                <h1>注册</h1>
            </el-header>
            <el-main>
                <el-form :model="registerForm" label-width="80px">
                    <el-form-item label="用户名">
                        <el-input v-model="registerForm.username"></el-input>
                    </el-form-item>
                    <el-form-item label="密码">
                        <el-input type="password" v-model="registerForm.password"></el-input>
                    </el-form-item>
                    <el-form-item label="年龄">
                        <el-input v-model="registerForm.age"></el-input>
                    </el-form-item>
                    <el-form-item label="性别">
                        <el-radio-group v-model="registerForm.gender">
                            <el-radio label="男">男</el-radio>
                            <el-radio label="女">女</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="兴趣爱好">
                        <el-checkbox-group v-model="registerForm.hobbies">
                            <el-checkbox label="游戏">游戏</el-checkbox>
                            <el-checkbox label="运动">运动</el-checkbox>
                            <el-checkbox label="旅游">旅游</el-checkbox>
                            <el-checkbox label="数码">数码</el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                    <el-form-item label="职业">
                        <el-select v-model="registerForm.profession" placeholder="请选择职业">
                            <el-option v-for="profession in professions" :key="profession" :label="profession"
                                :value="profession">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="自我介绍">
                        <el-input type="textarea" v-model="registerForm.introduction"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitRegister">提交</el-button>
                    </el-form-item>
                </el-form>

                
                <el-dialog v-model="dialogVisible" title="请确认注册信息" width="30%">
                    <p>用户名: {{ registerForm.username }}</p>
                    <p>年龄: {{ registerForm.age }}</p>
                    <p>性别: {{ registerForm.gender }}</p>
                    <p>兴趣爱好: {{ registerForm.hobbies.join(', ') }}</p>
                    <p>职业: {{ registerForm.profession }}</p>
                    <p>自我介绍: {{ registerForm.introduction }}</p>
                    <template #footer>
                        <el-button @click="dialogVisible = false">取消</el-button>
                        <el-button type="primary" @click="confirmRegister">确定</el-button>
                    </template>
                </el-dialog>
            </el-main>
        </el-container>
    </div>
    <script>
        const RegisterApp = {
            data() {
                return {
                    dialogVisible: false,
                    registerForm: {
                        username: '',
                        password: '',
                        age: '',
                        gender: '',
                        hobbies: [],
                        profession: '',
                        introduction: ''
                    },
                    professions: ['前端开发工程师', '产品经理', '后端开发', '其他']
                };
            },
            methods: {
                submitRegister() {

                    this.dialogVisible = true;
                },
                confirmRegister() {

                    alert('注册成功!');
                    this.dialogVisible = false;
                }
            }
        };
        Vue.createApp(RegisterApp).use(ElementPlus).mount("#register");
    </script>
</body>

</html>